<template>
  <el-form ref="form" :model="form" label-width="150px" :rules="rules">
    <el-form-item label="用户名" prop="name">
      <el-input :disabled="true" v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="注册类型" prop="type">
      <el-input :disabled="true" v-model="form.type"></el-input>
    </el-form-item>
    <el-form-item label="商户名称" prop="merchantName">
      <el-input v-model="form.merchantName"></el-input>
    </el-form-item>
    <el-form-item label="商家固话1" >
      <el-input v-model="form.fixLine1"></el-input>
    </el-form-item>
    <el-form-item label="商家固话2">
      <el-input v-model="form.fixLine2"></el-input>
    </el-form-item>
    <el-form-item label="商家手机1">
      <el-input v-model="form.phone1"></el-input>
    </el-form-item>
    <el-form-item label="商家手机2">
      <el-input v-model="form.phone2"></el-input>
    </el-form-item>
    <el-form-item label="经理姓名">
      <el-input v-model="form.managerName"></el-input>
    </el-form-item>
    <el-form-item label="商家地址">
      <el-cascader
        :options="areaList"
        v-model="form.adress"
        @change="handleChange">
      </el-cascader>
    </el-form-item>
    <el-form-item label="详细地址" class="special">
      <el-input type="textarea" v-model="form.adressDetail"></el-input>
    </el-form-item>
    <el-form-item label="商家主营"  prop="camp" class="special">
      <el-input :disabled="true" v-model="form.camp"></el-input>
    </el-form-item>
    <el-form-item label="经营范围">
      <el-input type="textarea" v-model="form.size"></el-input>
    </el-form-item>
    <el-form-item label="商家简介">
      <el-input type="textarea"  v-model="form.introduction"></el-input>
    </el-form-item>
    <el-form-item label="门店照片">
      <div class="shopPhoto">
        <img v-for="(item,index) in form.shopPhoto" :src="item" alt="" :key="index">
      </div>
    </el-form-item>
    <el-form-item label="营业执照照片">
      <div class="shopPhoto">
        <img :src="form.businessLicence" alt="" >
      </div>
    </el-form-item>
    <el-form-item label="法人照片">
      <div class="shopPhoto">
        <img :src="form.corporation" alt="" >
      </div>
    </el-form-item>
    <el-form-item label="法人名片照片">
      <div class="shopPhoto">
        <img :src="form.business" alt="" >
      </div>
    </el-form-item>

    <el-form-item style="width: 100%;">
      <el-button type="primary" @click="onSubmit">审核通过</el-button>
      <el-button type="danger" @click="out">退回</el-button>
      <el-button type="info" @click="save">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    export default {
      data(){
        return {
          form: {
            name: '',
            type: '',//注册类型
            merchantName: '',//商户名称
            fixLine1: '',
            fixLine2: '',
            phone1: '',
            phone2: '',
            managerName: '',//经理姓名
            adress: '',
            adressDetail: '',
            camp: '',//主营
            size: '',//范围
            introduction: '',//门店简介
            shopPhoto: [
              'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png',
              'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png',
              'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png',
              'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png',
            ],//门店照片
            businessLicence:  'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png',//营业执照
            corporation: 'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png',//发人照片
            business:  'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png',//名片


          },
          rules: {
          name: [
            {
                required:true,message:'',trigger:'blur'
              }
            ],
            type: [
              {
                required:true,message:'',trigger:'blur'
              }
            ],
            camp: [
              {
                required:true,message:'商户主营不能为空',trigger:'blur'
              }
            ],
            merchantName: [
              {
                required:true,message:'商户名称不能为空',trigger:'blur'
              }
            ],
        },
          areaList:[
            {
              value: 'daohang',
              label: '导航',
              children: [{
                value: 'cexiangdaohang',
                label: '侧向导航'
              }, {
                value: 'dingbudaohang',
                label: '顶部导航'
              }]
            }]
        }
      },
      methods:{
        onSubmit(){
          console.log('submit!');
        },
        handleChange(val){
          console.log(val)
        },
        save(){

        },
        out(){

        }

      }

    }
</script>

<style scoped lang="scss">
.el-form{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  padding:40px 30px;
  background: #eee;
  .el-form-item{
    width: 40%;
    margin-right: 10%;
    .shopPhoto{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      img{
        width: 100px;
        height: 100px;
        margin: 20px;
      }
    }

    &.special{
      display: inline-block;
      width: 100%;
    }
  }
}
</style>
